<template>
  <section class="component manual-tag panel">
    <tag-component class="tag" />
    <el-button
      @click="onClickTagSet"
      type="text"
      class="btn"
      v-if="!hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== 4 && menuChannel !== 18 && menuChannel !== 58"
      >设置</el-button
    >

    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="设置手工标识"
      :visible.sync="dialog"
      append-to-body
    >
      <manual-tag-set @close="dialog = false" :dialogStatus="dialog" :selectTag="selectArr"></manual-tag-set>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import TagComponent from "./tag-component.vue";
import ManualTagSet from "./manual-tag-set.vue";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import { CodePrarmeterService } from "~/services/management-service/code-prarmeter.service";
const CollectionExecutionModule = namespace("collection-execution");
import { State, namespace } from "vuex-class";

@Component({
  components: {
    TagComponent,
    ManualTagSet
  }
})
export default class ManualTag extends Vue {
  @CollectionExecutionModule.State private caseId;
  @Dependencies(CaseInfoService) private CaseInfoService: CaseInfoService;
  @Dependencies(CodePrarmeterService) private CodePrarmeterService: CodePrarmeterService;
  @CollectionExecutionModule.State private hiddenAction: boolean;
  @CollectionExecutionModule.State private menuChannel;

  @Prop() private selectArr
  private dialog: boolean = false;
  private tag: any = []
  @Watch("dialog") private tagFresh(val) {
    this.getTag()
  }
  
  private getTag() { // 获取已有标识
    this.CaseInfoService.getCaseInfoRecordById({ caseInfoRecordId: this.caseId }).subscribe(data => {
      this.tag = data.handWorkCodeResponse
      this.$emit('tagChanges', this.tag)
    })
  }

  private onClickTagSet() {
    this.dialog = true;
  }
}
</script>
<style lang="less">
.component.manual-tag {
  display: flex;
  flex-wrap: wrap;
  .box {
    .tag {
      float: left;
    }
    .btn {
      float: left;
      // margin: 7px 0 7px 5px;
    }
  }
}
</style>
